<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <button class="but1">点击</button>
    <ul>
        <li>这是li1</li>
        <li>这是li2</li>
        <li>这是li3</li>
        <li>这是li4</li>
        <li>这是li5</li>
    </ul>
    <script>
        // 标签对象.事件名(回调函数(事件对象){});

        // 其中回调函数是事件函数 会带有默认的event事件对象
        // jquery的事件名称与js相比少了on
        // $(".but1").click(function(e){
        //     console.log("button呗点击了",e);
        // })

        // $(".but1").mouseenter(function(e){
        //     console.log("button呗点击了",e);
        // })

        // $(".but1").mouseleave(function(e){
        //     console.log("button呗点击了",e);
        // })

        // hover(callback1,callback2) 悬停事件,
        // 参数1是鼠标移入时执行的函数
        // 参数2是鼠标移出时执行的函数
        // $(".but1").hover(function(){
        //     // 鼠标移入了
        //     console.log("鼠标移入了");
        // },function(){
        //     // 鼠标移出了
        //     console.log("鼠标移出了");
        // })


        // 默认的, 后创建标签会不带有这个事件
        // $("li").click(function(){
        //     console.log(this); //dom对象 当前点击的li标签
        //     console.log($(this).index()); //获取当前标签的索引值
        // })

        // 事件委托
        $("ul").on("click","li",function(){
            console.log("===");
        })

        
        // on() 添加一个监听事件
        // $(".but1").on("click",function(){
        //     console.log("but呗点击了");
        // })

        // // off与on是配套使用 用来删除一个监听事件
        // $(".but1").off("click");

        $(".but1").one("click",function(){
            console.log("事件只能执行一次");
        })

        var str = ""
        for(var i = 6;i < 10;i++){
            str += "<li>这是li"+i+"</li>";
        }
        // append()  在一个元素内追加一些子元素
        // $("ul").append(str);
        // 将子元素追加在谁内
        $(str).appendTo("ul");





    </script>
</body>
</html>